<template>
  <nav id="nav">
    <div class="navhead">
      <head>小组活动计划工具</head>
    </div>
    <div class="navleft">
      <a @click="toIndex">首页</a> |
      <a href="/css/">创建活动</a> |
      <a href="/js/">个人中心</a>
    </div>
    <div class="navsearch">
      <form method="get" action="/search/" id="myform">
        <div class="input">
          <input type="text" name="q" class="form-control" placeholder="搜索想找的活动名">
          <button id="searchbtn" class="btn">搜索</button>
        </div>
      </form>
    </div>
    <div class="navright">
      <div v-if="$store.state.isLogin">
        <a href="/html/">欢迎{{$store.state.userName}}</a> |
        <a href="/html/">退出登录</a>
      </div>
      <div v-else>
        <a href="/css/">注册</a> |
        <a @click="login">登录</a>
      </div>

    </div>


  </nav>
</template>

<script>
import $store from '../store/index'
export default {
  name: "Navbar",
  methods:{
    toIndex(){
      this.$emit('toIndex');
    },
    login(){
      this.$emit("login");
    }
  },
}
</script>

<style scoped>

#nav {
  display: flex;
  background-color: #f7f3f3;
  height: 50px;
  border-top: 2px solid #bbbbbb;
  border-bottom: 2px solid #bbbbbb;
  align-items: center;

}
.navhead,.navleft,.navsearch,.navright {
  flex: 1;

}
.navhead {
  padding: 3px;
}
.navsearch{
  text-align: right;
}
#searchbtn {
  margin-left: 5px;
}
.navright{
  text-align: right;
  padding-right: 5px;
}
.form-control {
  height: 30px;
  padding: 1px 3px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;

}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
}
button:hover {
  background-color: #fff;
}
a {
  text-decoration: none;
  cursor: pointer;
}
a:link {
  color: #2e3133;
}
a:hover {
  text-transform:uppercase;/* 鼠标指针移动到链接上 */
  border: 1px solid #2e3133;
}

</style>